<template>
  <div class="panel-play-bd" id="panelPlayBd" v-show="detailPlayerFlag">
    <div class="play-overlay" @click="detailPlayer">
      <img :src="audio.imgUrl" alt>
    </div>
    <!-- <div class="panel-paly-img-box"></div> -->
    <div class="panel-paly-lrc-box-big">
      <div class="panel-paly-lrc-box" :style="{top: lrcOffset() + 'px'}">
        <p
          v-for="(iteam,index) in songLrc.temp"
          :class="{isCurrentLrc:iteam.seconds ==Math.floor(audio.currentLength),isLength:iteam.seconds >=Math.floor(audio.currentLength)}"
          :key="index"
         
        >{{iteam.lrcContent}}</p>
      </div>
    </div>
    <div class="time-wrap" id="timeWrap">
      <mt-range
<<<<<<< HEAD
=======
     
>>>>>>> 7dd98ad4f10b0d0fc1a7994a24c127972341b2d9
        :min="0"
        :max="audio.songLength"
        v-model="audio.currentLength"
        :step="10"
        disabled
        :bar-height="3"
      
        @click.native="rangeChange($event)"
      >
        <div slot="start" class="pos1">{{audio.currentLength | time}}</div>
        <div slot="end" class="pos2">{{audio.songLength | time}}</div>
      </mt-range>
    </div>
    <div class="play-operate">
      <i class="btn-prev" @click="prveSong()"></i>
      <i class="btn-play-1" @click="toggleStatus()" :class="{'player-Pause':isPlay}" v-if="!isPlay"></i>
      <i class="btn-play-2" @click="toggleStatus()" :class="{'player-Pause':isPlay}" v-else></i>
      <i class="btn-next" @click="nextSong()"></i>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
// var toTal = new array(8);
export default {
  data() {
    return {
      toTal: []
    };
  },
  filters: {
    time(value) {
      var length = Math.floor(parseInt(value));
      var minute = Math.floor(value / 60);
      if (minute < 10) {
        minute = "0" + minute;
      }
      var second = length % 60;
      if (second < 10) {
        second = "0" + second;
      }
      return minute + ":" + second;
    }
  },
  mounted() {
<<<<<<< HEAD
    console.log(this.lrcOffset);
=======
    // console.log(this.songLrc);
>>>>>>> 7dd98ad4f10b0d0fc1a7994a24c127972341b2d9
  },
  computed: {
    ...mapGetters([
      "audio",
      "audioLoadding",
      "showPlayer",
      "isPlay",
      "detailPlayerFlag"
    ]),
    songLrc() {
      if (this.audio.lrc) {
        var temp = this.audio.lrc.split("\r\n"); //"[03:04.09]的梦境"
        temp = temp.splice(0, temp.length - 1);
        temp = temp.map(value => {
          var time = value.substr(1, 5);
          // console.log(time) 00:26
          var seconds =
            Math.ceil(time.split(":")[0]) * 60 + parseInt(time.split(":")[1]); //['00','26']
          var lrcContent = value.substr(10); //第十一位开始
          return {
            seconds,
            lrcContent
          };
        });
        return {
          temp //    0: {seconds: 0, lrcContent: "周杰伦 - 告白气球"}
        };
      }
    }
  },
  methods: {
    toggleStatus() {
      if (this.isPlay) {
        console.log(1);
        document.getElementById("audioPlay").pause();
      } else {
        document.getElementById("audioPlay").play();
      }
      this.$store.commit("isPlay", !this.isPlay);
    },
    nextSong() {
      console.log("我们即将为你播放下一曲歌");
      //这里我想办法把该歌曲的指针指向下一首歌曲，改变他们的索引hash值即可
      // this.next()
      this.$store.dispatch("next");
      this.$store.commit("isPlay", true);
    },
    prveSong() {
      console.log("我们即将为你播放上一首歌");
      //这里我想办法把该歌曲的指针指向上一首歌曲，改变他们的索引hash值即可
      // this.next()
      this.$store.dispatch("prve");
      this.$store.commit("isPlay", true);
    },
    detailPlayer() {
      console.log(666, "哈哈可以隐藏了");
      this.$store.commit("showDetailPlayer", false);
    },
    rangeChange(event) {
      var offset = event.offsetX;
      var rangeWidth = (document.documentElement.clientWidth-111) ;
      var clickLength = Math.floor(
        offset * this.audio.songLength / rangeWidth
      );
      console.log(
        "offset:" , offset,
        "rangWidth:" ,rangeWidth,
        "clickLength:" , clickLength,
        document.documentElement.clientWidth
      );
      if (offset < rangeWidth) {
        // console.log("重新设置setCurrent");
        this.$store.commit("setAudioTime", clickLength);
        this.$store.commit("setCurrent", false);
      }
    },
    lrcOffset() {
      if (this.songLrc) {
        var offset =
          (this.songLrc.temp.length -
            document.querySelectorAll(".isLength").length -
            2) *
          -25;
        var total = parseInt(this.audio.currentLength) + offset;
        // this.toTal.push(total);
        // console.log("total:", total);
        return parseInt(this.audio.currentLength) + offset;
      }
    }
  }
};
</script>
<style>
.panel-play-bd {
  width: 100%;
  height: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
  position: fixed;
  top: 65px;
  left: 0;
  z-index: 100;
}
.panel-paly-lrc-box-big {
  width: 100%;
  height: 396px;
  overflow: hidden;
  position: relative;
  z-index: 9;
}
.panel-paly-lrc-box {
   width: 100%;
  height: 396px;
  text-align: center;
  color: #afabac;
  transition: all 0.5s;
  position: absolute;
  z-index: 11;
}
.panel-paly-lrc-box p {
  width: 100%;
  height: 25px;
  line-height: 25px;
  vertical-align: top;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  position: relative;
  z-index: 99;
}
.play-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(0, 0, 0);
  z-index: 1;
}
.play-operate {
  text-align: center;
  position: absolute;
  z-index: 99;
  bottom: 130px;
  left: 90px;
}
.play-overlay img {
  width: 100%;
  height: 100%;
  /* position: absolute; */
  /* top:100px */
  opacity: 0.3;
}

.play-operate .btn-next,
.play-operate .btn-prev {
  width: 35px;
  height: 35px;
  margin: 0 13px;
  display: inline-block;
  vertical-align: middle;
}
.play-operate .btn-play-1,
.play-operate .btn-play-2 {
  width: 50px;
  height: 50px;
  margin: 0 13px;
  display: inline-block;
  vertical-align: middle;
}
.play-operate .btn-next {
  background: url("../assets/images/play_next.png") no-repeat;
}
.play-operate .btn-prev {
  background: url("../assets/images/play_prev.png") no-repeat;
}
.play-operate .btn-play-1 {
  background: url("../assets/images/play_play.png") no-repeat;
}
.play-operate .btn-play-2 {
  background: url("../assets/images/play_pause.png") no-repeat;
}
.play-operate .btn-next,
.play-operate .btn-prev,
.play-operate .btn-play-1,
.play-operate .btn-play-2 {
  background-size: 100% 100%;
}
.time-wrap {
  width: 100%;
  position: absolute;
  z-index: 99;
  /* text-align: center; */
   margin-top: 15px;
}

.time-wrap .mt-range-thumb {
  width: 13px;
  height: 13px;
  position: absolute;
  top: 26%;
  background: #3195fd;
  /* left: 0%!important; */
}
.mt-range {
  margin-left: 35px;
  margin-right: 75px;
  margin-bottom: 6px;
}
.pos1,
.pos2 {
  /* position: absolute;
  top: 0; */
  color: #dcdcdc;
}
.pos1 {
 float: left;
}
.pos2 {
 float: right;
}
.isCurrentLrc {
  transition: 1.5s;
  color: orange;
}
</style>

 